<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">分班管理</span>
			</Col>
			<Affix :offset-top="20" style="z-index: 10;position: absolute;right: 3%;">
				<Tooltip content="返回上一页" theme="light">
					<Button @click="btnback" style="right: 6%;z-index: 100;" type="ghost" shape="circle" icon="iconfont alicon-back_android_light"></Button>
				</Tooltip>
			</Affix>
		</Row>
		<Row style="padding-left:45px;margin-top: 20px;  width: 100%;">
			<div style=" padding: 15px 0;width: 40%;display: inline-block; background-color: #B3D4FC;float: left;">
				<Col span="24" style="text-align: center;width: 33.3%;">
				<span style="font-size: 14px;font-weight: 700;">年级：</span>
				<span style="font-size: 14px;">{{xkpkgrade}}</span>
				</Col>
				<Col span="24" style="text-align: center;width: 33.3%;">
				<span style="font-size: 14px;font-weight: 700;">入学年份：</span>
				<span style="font-size: 14px;">{{xkpkyear}}</span>
				</Col>
				<Col span="24" style="text-align: center;width: 33.3%;">
				<span style="font-size: 14px;font-weight: 700;">学科：</span>
				<span style="font-size: 14px;">{{xkpksubject}}</span>
				</Col>

			</div>
			<div style="padding: 8px 0;display: inline-block;float: right;padding-right: 45px;">
				<Button style="float: right;background-color: orange;color: white;font-size: 14px;margin: 0 10px;" @click="addfencengclass">+&nbsp;新增班级</Button>
				<Button style="float: right;margin: 0 10px;" icon="iconfont alicon-daoru" type="ghost" @click="getdownload">
					<span ></span>
			        <span >导入班级</span>
			    </Button>
				<Button style="float: right;" icon="iconfont alicon-mobanguanli" type="ghost" @click="getdownloadmodel">

					<span ></span>
			        <span >导入模板</span>
			    </Button>

			</div>
		</Row>
		<Row style="padding:35px 40px 0px 45px;width: 100%;">
			<Col span="24" style="text-align: left;width: 100%;">
			<span style="font-size: 14px;font-weight: 700;">学生分布：</span>
			<CheckboxGroup v-model="xkpkcheckbox" @on-change="xkpkcheckboxselect" style="display: inline-block;font-size: 24px;">
				<Checkbox v-for="item in xkpkcheckboxList" :key="item.value" :label="item.value" style="display: inline-block;font-size: 14px;">{{item.label}}</Checkbox>
			</CheckboxGroup>
			<Button style="font-size: 7px;display: inline-block; " type="primary" @click="choiceclass">选择行政班级</Button>
			</Col>
		</Row>
		<Row style="padding:10px 40px 0px 45px;width: 100%;">
			<Col span="24" style="text-align: left;width: 100%;">
			<span style="font-size: 14px;font-weight: 700;">学生成绩：</span>
			<CheckboxGroup v-model="xkpkcheckbox2" @on-change="xkpkcheckboxselect2" style="display: inline-block;font-size: 24px;">
				<Checkbox v-for="item in xkpkcheckboxList2" :key="item.value" :label="item.value" style="display: inline-block;font-size: 14px;">{{item.label}}</Checkbox>
			</CheckboxGroup>
			<RadioGroup v-model="fencengradio" type="button" @on-change="fencengradioselect">
				<Radio v-for="item in fencengradioList" :key="item.value" :label="item.value" style="margin: 0 5px;">{{item.label}}</Radio>
			</RadioGroup>
			</Col>
		</Row>

		<Row style="padding:10px 40px 0px 45px;width: 100%;">
			<Col span="24" style="text-align: left;width: 100%;">
			<span style="font-size: 14px;font-weight: 700;">男女比例：</span>
			<CheckboxGroup v-model="xkpkcheckbox3" @on-change="xkpkcheckboxselect3" style="display: inline-block;font-size: 24px;">
				<Checkbox v-for="item in xkpkcheckboxList3" :key="item.value" :label="item.value" style="display: inline-block;font-size: 14px;">{{item.label}}</Checkbox>
			</CheckboxGroup>
			</Col>
		</Row>
		<Row style="padding: 45px;">
			<div v-for="(item,index) in subjectList" @mouseover="mouseOver(index)" @mouseout="mouseOut(index)" :key="item.subjectid" style="float: left; display: inline-block;width: 18%;margin-right: 1%; height: 160px;border: 1px #e4e5e7 solid;">
				<div style="height: 110px;width: 100%;display: inline-block;background-color: #FF9900;">

					<span style="width: 65%; text-align: left; display: inline-block; font-size: 18px;padding-top: 20px;padding-left: 7px;float: left;">{{item.levelname}}&nbsp;<span style="font-size: 14px;">{{item.stunum}}/{{item.stuallnum}}人</span></span>
					<span style="width: 35%; text-align: right; display: inline-block; float: right;padding-top: 24px;padding-right: 7px ;font-size: 14px;">{{item.teacher}}</span>
					<div style="display: inline-block;width: 100%;">
						<span style="font-size: 12px;float: left; padding:14px 0 0 7px;">{{item.subject}}·{{item.classtype}}</span>
						<span style="font-size: 12px;float: right; padding: 14px 7px 0 0; ">{{item.subjecttime}}</span>
					</div>
					<div style="float: right;position: relative;top: -80px;right: 7px;" v-if="item.showsmall==true?true:false">
						<div style="display: inline-block; background-color: #000000; opacity: 0.7;">
							<span @click="gotoadd(index)" style="z-index: 1000;color: white;margin: 5px;">添加学生</span>
						</div>
						<div style="display: inline-block; background-color: #000000; opacity: 0.7;">
							<span @click="gotoedit(index)" style="z-index: 1000;color: white;margin: 5px;">编辑</span>
						</div>
						<div style="display: inline-block; background-color: #000000; opacity: 0.7;">
							<span @click="gotodel(index)" style="z-index: 1000;color: white;margin: 5px;">删除</span>
						</div>
					</div>
				</div>

				<div style="display: inline-block; width: 100%;display: block;">
					<span style=" padding:16px 0 16px 5px;float: left;">{{item.lou}}{{item.floor}}{{item.classroom}}</span>
					<div style="float: right;border: 1px solid #57A3F3;height: 18px;border-radius: 5px;margin: 16px 2px;"><span style="margin: 0 2px;">{{item.roomtype}}</span></div>
				</div>

			</div>
		</Row>
		<Row style="padding:0 45px;">
			<Button type="primary" @click="divideclass" style="float: left;">自动生成分层分班</Button>
		</Row>
		<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:550px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
			<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
				<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
			</Row>
			<Row style="font-size: 15px;">
				<Col style="text-align: center;padding: 10px;">
				<span>分层班级:</span>
				<Select v-model="classtypename" @on-change="classtypenameChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in classtypenameList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>总&nbsp;&nbsp;人&nbsp;&nbsp;数:</span>
				<input type="text" oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model="allpeople" value="allpeople" placeholder="请输入总人数" style="text-align: center;width: 60%;position: relative;height: 30px;line-height: 30px;ime-mode: inactive;"></input>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目:</span>
				<Select v-model="subjectname" @on-change="subjectnameChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in subjectnameList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>任课老师:</span>
				<Select v-model="teachername" @on-change="teachernameChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in teachernameList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>班级类型:</span>
				<Select v-model="classtype" @on-change="classtypeChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in classtypeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时:</span>
				<Select v-model="classtime" @on-change="classtimeChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in classtimeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Row>
					<Col style="text-align: center;padding: 10px;">
					<span>教&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室:</span>
					<Select v-model="louhao" @on-change="louhaoChange" style="text-align: center; width: 20%;position: relative;">
						<Option v-for="(item,index) in louhaoList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					<Select v-model="classroomnumber" @on-change="classroomnumberChange" style="text-align: center; width: 20%;position: relative;">
						<Option v-for="(item,index) in classroomnumberList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					<Select v-model="classroomtype" @on-change="classroomtypeChange" style="text-align: center; width: 20%;position: relative;">
						<Option v-for="(item,index) in classroomtypeList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					</Col>
				</Row>
			</Row>
			<Row style="text-align: center;">
				<Col span="24" style="margin-top:15px">
				<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
				<Button v-if="this.title=='新增班级'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
				<Button v-if="this.title=='编辑班级'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
				</Col>
			</Row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listsubjectId: "",
				listimgUrl: "",
				obj: "",
				title: "",
				people: "",
				allpeople: "",
				louhao: "",
				subjectname: "",
				classroomnumber: "",
				classroomtype: "",
				classtime: "",
				classtype: "",
				teachername: "",
				classtypename: "",
				sortSettingHidden: false,
				fencengradio: 1,
				xkpkgrade: "",
				xkpkyear: "",
				xkpksubject: "",
				xkpkcheckbox3: [],
				xkpkcheckbox: [],
				xkpkcheckbox2: [],
				subjectnameList: [{
						value: 1,
						label: "语文",
					},
					{
						value: 2,
						label: "数学",
					},
					{
						value: 3,
						label: "英语",
					},
					{
						value: 4,
						label: "物理",
					},
					{
						value: 5,
						label: "化学",
					},
					{
						value: 6,
						label: "生物",
					},
					{
						value: 7,
						label: "历史",
					},
					{
						value: 8,
						label: "地理",
					},
					{
						value: 9,
						label: "政治",
					},
				],
				louhaoList: [{
						value: 1,
						label: "1#",
					},
					{
						value: 1,
						label: "5#",
					},
					{
						value: 1,
						label: "11#",
					},
					{
						value: 1,
						label: "18#",
					},
					{
						value: 1,
						label: "20#",
					},
				],
				classroomnumberList: [{
						value: 1,
						label: "教室1",
					},
					{
						value: 2,
						label: "教室2",
					},
					{
						value: 3,
						label: "教室3",
					},

				],
				classroomtypeList: [{
						value: 1,
						label: "普通教室",
					},
					{
						value: 2,
						label: "大型教室",
					},

				],
				classtimeList: [{
						value: 1,
						label: "4课时/每周",
					},
					{
						value: 2,
						label: "6课时/每周",
					},
					{
						value: 3,
						label: "8课时/每周",
					},
					{
						value: 4,
						label: "12课时/每周",
					},
				],
				classtypeList: [{
						value: 1,
						label: "普通班",
					},
					{
						value: 2,
						label: "提高班",
					},
					{
						value: 3,
						label: "高考班",
					},
				],
				teachernameList: [{
						value: 1,
						label: "赵老师",
					},
					{
						value: 1,
						label: "钱老师",
					},
					{
						value: 1,
						label: "孙老师",
					},
					{
						value: 1,
						label: "李老师",
					},
					{
						value: 1,
						label: "周老师",
					},
					{
						value: 1,
						label: "吴老师",
					},
					{
						value: 1,
						label: "郑老师",
					},
					{
						value: 1,
						label: "王老师",
					},
					{
						value: 1,
						label: "冯老师",
					},
					{
						value: 1,
						label: "陈老师",
					},
				],
				classtypenameList: [{
						value: 1,
						label: "A1班",
					},
					{
						value: 2,
						label: "A2班",
					},
					{
						value: 3,
						label: "B1班",
					},
					{
						value: 4,
						label: "B2班",
					},
					{
						value: 5,
						label: "C1班",
					},
					{
						value: 6,
						label: "C2班",
					},
				],
				xkpkcheckboxList: [{
					value: 1,
					label: "部分行政班级尽量不拆班",
				}],
				xkpkcheckboxList2: [{
						value: 1,
						label: "各班学生平均分平均",
					},
					{
						value: 2,
						label: "各班学生成绩集中",
					}
				],
				xkpkcheckboxList3: [{
					value: 1,
					label: "与原有学生比例相同",
				}],
				fencengradioList: [{
					value: 1,
					label: "高",
				}, {
					value: 2,
					label: "中",
				}, {
					value: 3,
					label: "低",
				}],
				subjectList: [{
						subjectid: "1",
						levelname: "A1班",
						stunum: "50",
						stuallnum: "60",
						teacher: "赵老师",
						subject: "语文",
						classtype: "提高班",
						subjecttime: "4课时/每周",
						lou: "20#",
						floot: "4层",
						classroom: "教室1",
						roomtype: "普通教室",
						showsmall: false,
					},
					{
						subjectid: "2",
						levelname: "A2班",
						stunum: "50",
						stuallnum: "60",
						teacher: "李老师",
						subject: "语文",
						classtype: "高考班",
						subjecttime: "4课时/每周",
						lou: "20#",
						floot: "3层",
						classroom: "教室2",
						roomtype: "普通教室",
						showsmall: false,
					},
					{
						subjectid: "3",
						levelname: "B2班",
						stunum: "50",
						stuallnum: "60",
						teacher: "王老师",
						subject: "语文",
						classtype: "普通班",
						subjecttime: "4课时/每周",
						lou: "20#",
						floot: "4层",
						classroom: "教室1",
						roomtype: "普通教室",
						showsmall: false,
					},
					{
						subjectid: "4",
						levelname: "B1班",
						stunum: "50",
						stuallnum: "60",
						teacher: "王老师",
						subject: "语文",
						classtype: "普通班",
						subjecttime: "4课时/每周",
						lou: "20#",
						floot: "3层",
						classroom: "教室1",
						roomtype: "普通教室",
						showsmall: false,
					},
				],

			}
		},
		created() {
			this.init()
		},
		methods: {
			init: function() {
				this.xkpkgrade = sessionStorage.getItem('xkpkgrade')
				this.xkpksubject = sessionStorage.getItem('xkpksubject')
				this.xkpkyear = sessionStorage.getItem('xkpkyear')

			},
			btnback: function() {
				this.$router.back(-1)
			},
			choiceclass: function() {},
			getdownload: function() {},
			getdownloadmodel: function() {},
			xkpkcheckboxselect: function() {},
			addfencengclass: function() {
				this.title = "新增班级"
				this.sortSettingHidden = true
				this.subjectname = "语文"
				this.louhao = "1#"
				this.allpeople = ""
				this.people = "0"
				this.classroomnumber = "教室1"
				this.classroomtype = "普通教室"
				this.classtime = "4课时/每周"
				this.classtype = "普通班"
				this.teachername = "李老师"
				this.classtypename = "A1班"
			},
			fencengradioselect: function() {},
			xkpkcheckboxselect2: function() {},
			xkpkcheckboxselect3: function() {},
			gotoedit: function(index) {
				this.sortSettingHidden = true
				this.title = "编辑班级"
				this.obj = index
				this.listsubjectId = this.subjectList[index].subjectid
				this.subjectname = this.subjectList[index].subject
				this.louhao = this.subjectList[index].lou
				this.allpeople = this.subjectList[index].stuallnum
				this.people = this.subjectList[index].stunum
				this.classroomnumber = this.subjectList[index].classroom
				this.classroomtype = this.subjectList[index].roomtype
				this.classtime = this.subjectList[index].subjecttime
				this.classtype = this.subjectList[index].classtype
				this.teachername = this.subjectList[index].teacher
				this.classtypename = this.subjectList[index].levelname
			},
			gotoadd: function(index) {
//				this.subjectList[index].people=parseInt(this.subjectList[index].people)+1
//				console.log(this.subjectList[index].people)
			},
			gotodel: function(index) {
				this.subjectList.splice(index, 1)
			},
			mouseOver: function(index) {
				this.subjectList[index].showsmall = true
			},
			mouseOut: function(index) {
				this.subjectList[index].showsmall = false
			},
			divideclass: function() {},
			savesort: function() {
				if(this.allpeople == "") {
					alert('总人数不能为空')
				} else {
					this.subjectList.push({
						subjectid: this.subjectList.length + 1,
						subject: this.subjectname,
						lou: this.louhao,
						stuallnum: this.allpeople,
						stunum: this.people,
						classroom: this.classroomnumber,
						roomtype: this.classroomtype,
						subjecttime: this.classtime,
						classtype: this.classtype,
						teacher: this.teachername,
						levelname: this.classtypename,
						showsmall: false,

					})
					this.sortSettingHidden = false
					alert('保存成功')
				}
			},
			cancel: function() {
				this.sortSettingHidden = false
			},
			classtypenameChange: function() {},
			teachernameChange: function() {},
			classtypeChange: function() {},
			classtimeChange: function() {},
			louhaoChange: function() {},
			classroomnumberChange: function() {},
			classroomtypeChange: function() {},
			subjectnameChange: function() {},
			editsavesort: function() {
				if(this.allpeople == "") {
					alert('总人数不能为空')
				} else {
					this.subjectList.splice(this.obj, 1, {
						subjectid: this.listsubjectId,
						subject: this.subjectname,
						lou: this.louhao,
						stuallnum: this.allpeople,
						stunum: this.people,
						classroom: this.classroomnumber,
						roomtype: this.classroomtype,
						subjecttime: this.classtime,
						classtype: this.classtype,
						teacher: this.teachername,
						levelname: this.classtypename,
						//				imgurl:this.listimgUrl,
						showsmall: false,
					})
					this.sortSettingHidden = false
					alert('保存成功')
				}

			},
		},
	}
</script>

<style>

</style>